<template>
    <div class="bgc">
      <!-- 流水贷logo -->
        <img src="../../assets/lnnx/zhouzhuandai.png" style="width:100%" alt="">
        <!-- 最高可贷 -->
        <div class="btn">
            <div class="title">
                最高可贷(元)
            </div>
            <div class="aum">
                3,000,000
            </div>
            <div class="text">
                <div>利率低至 4.00%</div>
                <div>信用模式</div>
               <div>先息后本</div>
            </div>
            <div class="submit" @click="toproduct">
               立即申请
            </div>
        </div>
        <div class="logo">
            <!-- 介绍详情 -->
            <!-- <div class="introduce_sec">
                <div class="icon5">
                    <img src="../../assets/lnnx/icon6.png" style="width:100%;height:100%" alt="">
                </div>
                <div class="introduce_sec_text">
                    为进一步加大对小微企业金融服务力度，满足小微企业不同发展阶段经营活动的资金需求，实现服务对象专业化精准化、批量化、差异化，出台本产品。
                </div>
            </div> -->
            <!-- 产品详情 -->
            <div class="introduce">
                <!-- 产品介绍 -->
                <div class="introduce_first">
                    <img src="../../assets/lnnx/icon7.png" style="height:2rem" alt="">
                    <div style="margin:0 1rem">产品介绍</div>
                    <img src="../../assets/lnnx/icon8.png" style="height:2rem" alt="">
                </div>
                
                <!-- 产品优势 -->
                <div class="introduce_three">
                    <div v-for="item,index in productList" :key="index" class="introduce_three_li">
                        <!-- 标题 -->
                        <div class="introduce_three_title">
                            <div class="introduce_three_num">
                                <img src="../../assets/lnnx/icon9.png" style="width:2rem;height:2rem;margin-top:0.7rem" alt="">
                            </div>
                            <div class="introduce_three_name">
                                {{ item.name}}
                            </div>
                        </div>
                        <div class="introduce_three_const">
                            {{ item.const}}
                        </div>
                    </div>
                </div>
            </div>
            <!-- footer -->
            <div class="footer">
                <img src="../../assets/lnnx/icon7.png" style="height:2rem" alt="">
                <div style="margin:0.7rem 1rem 0;line-height: 3rem;">最终解释权归{{bank}}所有</div>
                <img src="../../assets/lnnx/icon8.png" style="height:2rem" alt="">
            </div>
        </div>
    </div>
  </template>
  
  <script>
  export default {
      name:'productTurnover',
      data() {
          return {
              bank:'辽宁农商银行',
              cs1:'',
              cs2:'',
              openid:'',
              productList:[//循环遍历展示产品介绍部分
                  {
                      id:'01',
                      name:'贷款对象',
                      const:'小微企业。'
                  },
                  {
                      id:'02',
                      name:'贷款用途',
                      const:'满足小微企业短期生产经营和临时资金周转需求。'
                  },
                  {
                      id:'03',
                      name:'贷款期限',
                      const:'原则上不超过1年。'
                  },
                  {
                      id:'04',
                      name:'贷款利率',
                      const:'根据借款企业综合贡献度情况确定，但不得低于4%。'
                  },
                  {
                      id:'05',
                      name:'贷款额度',
                      const:'贷款额度根据借款企业资金需求、资金周转能力、还款能力等因素综合确定，最高贷款额度不得超过300万元(含)。'
                  },
                  {
                      id:'06',
                      name:'贷款方式',
                      const:'信用模式，追加借款企业法定代表人及其配偶、股东及其配偶为借款企业提供个人连带责任保证。'
                  },
                  {
                      id:'07',
                      name:'还款方式',
                      const:'按月付息，到期还本。'
                  },
              ]
          }
      },
      created() {
        this.getInit()
      },
      methods:{
        // 埋点
        getBurialPoint() {
            var that = this
            var data = {
                CstToken:that.openid,//微信OPENID
                BurTp:'2',//	埋点类型
                BsnTp:'8305',//	业务类型
                BrNo:'',  //	网点机构
                LegCd:that.cs2,    //法人机构
                CstMgrNo:that.cs1,   //	客户经理ID
                PdNo:'030114',   //	产品ID
                PdTp:'', //	产品类型
                PdNm:'助企周转贷', //	产品名称
                PdGrp:'',//	产品组
                ChnlSrc:'',         //	来源渠道
                
            }
            that.$api.UpBurialPointData(data).then(res => {
                console.log(res);
            })

        },

        getInit() {
            // this.$toast.loading({
            //     duration: 0,
            //     message: '加载中...',
            //     forbidClick: true,
            // });
            let urlMsg = '';
            console.log(window);
            if (window.location.href.indexOf('localhost') != -1 || window.location.href.indexOf('3.1.21') != -1) {
                urlMsg =
                    'sgn=MEYCIQCZFdmhIzDq6x95RZbZHyj2cwCjAZRzQvc/Ft0o9BdoDwIhAIDpOdxylYqQFH0eRIR1sQkRveuyxfXzFGHpR5lVzfqU&data=MGY0ZTU1MGQ4ZjQyNGJlYzgwODkwNGUwY2NlOTYyYTd8MTYwNTYwNzY4ODk4NHxhMzhkNjRjMGMzYTVlYWI2fDMuMS4xNS4yMDA=&param=Wj3/trbnFBuI3jYOosEhEoPRCl9L3Ic/PGjWT/6ARf+jbA2FXfEcUAOSgNitRYrqxAMmoQoKdlnl35QN0hpWWzOCCjmx0FspUH3ABUszHQJAWFcPW1NW9sux11rv4LHEnsvBtGHMp8bH6h+2ujB/ef5SQkgi6wt8Qa5OvdGb+PNxL+/vTsjcPmPEvTiDwTzO45Xm9GAjVAYkpGDiWE8tETsCpJ2o5E7CRwA1Yuy+K1Qax07aEU/kgKDQ2Skemtcv7FcPw/F25wW/9sHcWxF0XO2IMLQ157xf0pTbaOrp7eYc/BsO6JFycvdOrQmLtu4NUIC8iplxscjOL1yhwVFqBw=&param={"Rsrv3":"111111","Rsrv2":"123456","Rsrv5":"2222"}';

            } else {
                urlMsg = decodeURIComponent(window.location.search.substr(1));
            }
            console.log(urlMsg);

            let itemObj = new Object();
            urlMsg.split('&').forEach(item => {
                itemObj[item.split('=')[0]] = item.split('=')[1];
            });
            console.log(itemObj);

            this.$api.init().then(res => {
                console.log(res);
                console.log(itemObj.param.indexOf('{'));
                if (res.Head.RspCd === '000000' && itemObj.param.indexOf('{') === -1) {
                    this.getSendMsg(res.Data.Param);
                } else if (res.Head.RspCd === '000000' && itemObj.param.indexOf('{') !== -1) {
                    this.getSendMsg(JSON.parse(itemObj.param));
                } else {
                    this.$toast({
                        title: '提示',
                        message: res.Head.RspInf
                    });
                }
            });
        },
        getSendMsg(msg) {
            let param = msg;
            this.cs1 = param.Rsrv3; // 参数1
            this.cs2 = param.Rsrv5; // 参数2
            this.openid = param.Rsrv2; // 参数3
            this.getBurialPoint()
            console.log(this.cs1);
        },
        toproduct() {
            var that = this
            that.$router.replace({
                path: "/productIndex",
                query: { id:'2',userid:this.cs1,usercode:this.cs2,openid:this.openid},
            });
        }
    }
  }
  </script>
  
  <style scoped>
  .bgc {
      position:fixed;
      width: 100%;
      height: 100%;
      
      overflow-y: auto;
  }
  .logo {
      width: 100%;
      background: url('../../assets/lnnx/bgc.png') no-repeat;
      background-size: 100% 100%;
      border: 0.1rem solid transparent;
  }
  .btn {
      position: absolute;
      top: 26rem;
      left: 1.8rem;
      width: 90%;
      height: 17rem;
      margin: 0 auto;
      background:rgba(255, 255, 255, 0.8);
      border-radius: 0.5rem;
      border: 0.1rem solid #fff;

      z-index: 2;
  }
  .title {
      width: 90%;
      color: rgb(16, 32, 86);
      font-size: 1.5rem;
      text-align: center;
      font-family:'HarmonyOS Sans SC';
      font-weight: 700;
      margin: 1rem auto 0;
  }
  .aum {
      width: 90%;
      height: 4rem;
      font-size: 3rem;
      text-align: center;
      margin: 0 auto 1rem;
      font-weight: 700;
      font-family:'D-DIN';
      color: rgb(250, 100, 1);
  }
  .text {
      width: 70%;
      font-size: 1.2rem;
      color: rgb(78, 89, 105);
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
  }
  .submit {
      width: 90%;
      height: 4rem;
      background-color: #ff7e5f;
      border-radius: 25rem;
      color: #fff;
      text-align: center;
      line-height: 4rem;
      margin: 1rem auto;
      font-size: 1.4rem;
      font-weight: 700;
  }
  .introduce {
      width: 90%;
      margin: 14rem auto 0 ;
      background: rgba(255,255,255,.5);
      border-radius: 0.5rem;
      border: 0.1rem solid #fff;
      padding: 1rem 0;
      margin-bottom: 1rem;
  }
  .introduce_first {
      width: 100%;
      height: 4.6rem;
      line-height: 4.6rem;
      font-size: 1.8rem;
      text-align: center;
      color:#000;
      font-weight: 700;
      display: flex;
      justify-content: center; /* 水平居中 */
      align-items: center;     /* 垂直居中 */
  }
  .introduce_first img {
      margin-bottom: 1rem;
  
  }
  .introduce_sec {
      width: 90%;
      height: 8rem;
      margin: 14rem auto 0;
      background: rgba(255, 255, 255, 0.96);
      border-radius: 0.8rem;
      box-shadow: 0.5rem 0.5rem 0 rgba(76, 118, 254, 0.3);
      position: relative;
      padding-top: 0.2rem;
  }
  .icon5 {
      width: 2.8rem;
      height: 2.5rem;
      position: absolute;
      bottom: -2.3rem;
      left: 12%;
  }
  .introduce_sec_text {
      width: 90%;
      color: rgb(78, 89, 105);
      text-indent: 2em;
      margin: 1.5rem auto 0;
  }
  .introduce_three {
      width:90%;
      margin: 0rem auto 0;
  }
  .introduce_three_li {
      width: 100%;
      padding: 2rem 0;
      border-bottom: 0.1rem solid rgb(209, 220, 255);
  }
  .introduce_three_li:last-child {
      border-bottom: 0
  }
  .introduce_three_title {
      width: 100%;
      height: 3.3rem;
      display: flex;
      line-height: 4rem;
  }
  .introduce_three_num {
        width: 3.2rem;
        height: 3.3rem;
        line-height: 3.3rem;
        color: #fff;
        font-size: 1.5rem;
        background-color:#ff7e5f;
        text-align: right;
        border-radius: 1.8rem 0 0 0;
        box-sizing: border-box;
  }
  .introduce_three_name {
      width: 9rem;
      height: 3.3rem;
      line-height: 3.3rem;
      color: #fff;
      font-size: 1.5rem;
      font-weight: 700;
      text-align: center;
      border-radius: 0 1.8rem 1.8rem 0;
      padding-right: 1rem;
      background:linear-gradient(to right, #ff7e5f,#feb47b);
      margin-left: -0.1rem;
  }
  .introduce_three_const {
      width: 90%;
      color: rgb(78, 89, 105);
      font-size: 1.4rem;
      margin: 1rem auto 0;
  }
  .footer {
      width: 90%;
      height: 3rem;
      margin: 0 auto 2rem;
      display: flex;
      justify-content: center; /* 水平居中 */
      align-items: center;     /* 垂直居中 */
      font-size: 1.3rem;
      color: rgb(78, 89, 105);
  }
  </style>